<template>
  <div>
    <img src="/image/login/bg.png" class="bg-img" />
    <div class="login">
      <p>用户登录</p>
      <div class="form">
        <div class="tel">
          <input type="text" placeholder="手机号" v-model="tel" />
        </div>
        <div>
          <input type="text" placeholder="填写验证码" />
        </div>
        <div class="pwd">
          <input type="text" placeholder="填写手机验证码" v-model="code" />
          <button class="req" @click="getCode">
            <span>获取手机验证码</span>
          </button>
        </div>
        <div class="sure">
          <input type="Checkbox" /><span>我已阅读并同意</span>
        </div>
        <div class="btn" @click="login"><span>登录</span></div>
        <div class="txt">未注册手机号验证后自动登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetCode } from '@/api/code'
import { GetLogin } from '@/api/login'
export default {
  data() {
    return {
      tel: '',
      code: ''
    }
  },
  methods: {
    async getCode() {
      try {
        let result = await GetCode(this.tel)
        console.log(result)
      } catch (error) {
        console.log(error)
      }
    },
    async login() {
      try {
        let result = await GetLogin(this.tel, this.code)
        console.log(this.tel, this.code)
        if (result.code === 200) {
          localStorage.setItem(
            'userInfo',
            JSON.stringify(result.result.userInfo)
          )
          this.$router.push('/home')
        }
        console.log(result)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped>
img {
  position: relative;
}
.login {
  width: 500px;
  position: absolute;
  top: 30%;
  right: 20%;
  background-color: white;
  /* border: 1px solid #000; */
}
p {
  font-size: 25px;
  padding: 0 10px;
}
.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.form div {
  width: 80%;
  height: 50px;
  line-height: 50px;
  /* border: 1px solid #000; */
}
input {
  height: 100%;
  /* border: 1px solid #000; */
}
.tel input {
  width: 100%;
}
.pwd {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pwd input {
  width: 50%;
}
.req {
  width: 50%;
  height: 100%;
  cursor: pointer;
  border: 0px solid #0099a8;
  background-color: #0099a8;
}
.req span {
  font-size: 20px;
  padding: 10px;
  color: white;
}
.sure {
  /* border: 1px solid #000; */
}
.sure input {
  vertical-align: middle;
}
.btn {
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  padding: 5px;
  color: white;
  background-color: #0099a8;
  /* border: 1px solid #000; */
}
.txt {
  text-align: center;
}
</style>
